<template>
  <div>
    <div class="mains">
      <div class="logo">
        <el-image class="imgs" :src="url"></el-image>
      </div>

      <div class="header">
        <div class="title">系统登录</div>
      </div>

      <div style="padding:15px;">
        <el-form ref="loginForm" :model="form">
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="账号" clearable></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input show-password prefix-icon="el-icon-s-goods" v-model="form.password" placeholder="请输入密码" @keyup.enter.native="onSubmit"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button style="width: 100%;" type="primary" v-on:click="onSubmit()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>

</template>

<script>
export default {
  name: 'login-page',
  data () {
    return {
      url: 'https://pimg.39.net/PictureLib/A/f4/c3/20181217/org/7449434.jpg',
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    onSubmit () {
      if (this.form.username === '') {
        this.$message.error('请输入账号')
      } else if (this.form.password === '') {
        this.$message.error('请输入密码')
      }
      let self = this
      this.$pool.query('select * from user where username=? and password=?', [this.form.username, this.form.password], function (err, rows) {
        if (err) {
          self.$message.error({
            message: err,
            duration: 800
          })
          return
        }
        if (rows.length === 0) {
          self.$message.error({
            message: '登录失败，用户名或密码错误',
            duration: 800
          })
        } else {
          self.$message.success({
            message: '登录成功',
            duration: 800
          })
          sessionStorage.setItem('user_id', rows[0].user_id)
          sessionStorage.setItem('real_name', rows[0].real_name)
          self.$router.push('/')
        }
      })
    }
  }
}
</script>

<style>
.mains {
  width: 350px;
  margin: 0 auto;
  height: 490px;
  padding: 50px 35px 0;
}

.logo {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.imgs {
  width: 110px;
  height: 80px;
}

.header {
  padding: 0 15px;
  display: flex;
  height: 55px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px #f5f5f5 solid;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  text-align: center;
  margin:auto;
}
</style>
